<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用 layui</title>
  <link rel="stylesheet" href="../plugs/layui/src/css/layui.css">
  <link rel="stylesheet" href="../css/zlxindex.css">
  <style>
    .right-nav {
      left: 400px;
      margin-right: 20px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="head">
      <ul class="layui-nav" lay-filter="" ">
      <li class=" layui-nav-item layui-this"><a
          href="http://localhost:70/cattle-and-horses-oj-html/html/index.html"><img src="../image/logo.png"
            class="layui-nav-img"></a></li>
        <li class="layui-nav-item "><a href="index.html">学习</a></li>
        <li class="layui-nav-item"><a href="problem.html">题库</a></li>
        <li class="layui-nav-item"><a href="circle.html">讨论</a></li>
        <li class="layui-nav-item"><a href="competition.html">竞赛</a></li>
        <li class="layui-nav-item"><a href="">求职</a></li>
        <li class="layui-nav-item">
          <a href="javascript:;">商店</a>
          <dl class="layui-nav-child">
            <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>`
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item right-nav"><button type="button"
            class="layui-btn layui-btn-primary layui-border-orange  layui-btn-sm" id="vipbnt">开通Plus会员</button></li>
        <li class="layui-nav-item right-nav"><button onclick="mianshi()" type="button"
            class="layui-btn layui-btn-primary layui-border-blue  layui-btn-sm">牛码面试</button></li>

        <li class="layui-nav-item right-nav">
          <a href="javascript:mess();">消息<span class="layui-badge" style="width: 20px;">0</span></a>
        </li>
        <li class="layui-nav-item right-nav"><a href="register.html"><span>注册</span></a></li>
        <li class="layui-nav-item right-nav ">
          <a href="login.html"><img id="avatar" src="../image/logo.png" class="layui-nav-img"> <span
              id="nickname">登录</span></a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="personal.html">个人中心</a></dd>
            <dd><a href="javascript:exit();">退了</a></dd>
          </dl>
        </li>
      </ul>
    </div>

  </div>
  <!-- 你的 HTML 代码 -->



  <script src="../plugs/layui/src/layui.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="../js/vue.js"></script>
  <script>

    layui.use(['layer', 'form'], function () {
      var layer = layui.layer
        , form = layui.form;
    });
    layui.use('element', function () {
      var element = layui.element;

      //…
    });

    $(function () {
      let clientID = "";

      //链接服务器...
      function connect(res) {
        let ws;
        if ("WebSocket" in window) {
          // var socket =  new  ReconnectingWebSocket（url，null，{debug ： true，reconnectInterval ： 3000 }）
          clientID = res.msg;
          ws = new WebSocket("ws://localhost:70/webSocket/dev/web/" + clientID);

          ws.onopen = function () {
            console.log("链接成功....");
            ws.send("你好服务端！我是客户端 " + clientID);
          }


          ws.onmessage = function (res) {
            let msg = res.data;
            if (msg === 'ping') {
              console.log('心跳....');
            }
            else {
              let info_counts = parseInt($(".layui-badge").text()) + 1;
              $(".layui-badge").text(info_counts);
              alert("您有新的消息...")
            }
          };


          ws.onclose = function () {
            console.log("链接关闭....");

          };
        }
      }
      //链接结束.....

      todetail = function (self) {
        let discussId = self.previousElementSibling.value;
        let commentid = self.nextElementSibling.value;
        $.post('http://localhost:70/devu/discuss/read', { commentid: commentid }, function (res) {
          if (res.code == "200") {
            window.location = "discuss.html?id=" + discussId;
          }
        })

      }

      $("#vipbnt").click(function () {
        let token = localStorage.getItem("token");
        if (token == null) {
          alert("请先登录");
        }
        else {
          if ($("#vipbnt").text() == "超级plus会员") {
            alert("您已经是会员了")
          }
          else {
            $.ajax({
              type: "post",
              headers: { token: localStorage.getItem("token") },
              url: 'http://localhost:70/devu/user/vip',
              success: function (res) {
                $("body").html(res.content);
              }

            })
          }
        }
      })

      //TODO消息弹出层
      mess = function () {
        let contents = "";
        if (clientID != "") {
          $.ajax({
            type: "get",
            url: "http://localhost:70/devu/discuss/comment",
            data: { clientID: clientID },
            success: function (res) {
              console.log(res);
              if (res.code == "200") {
                comment = res.content;

                for (let key in comment) {
                  let avatar = comment[key].cavatar;
                  let cont = comment[key].content;
                  let discuss_id = comment[key].discussId;
                  let cId = comment[key].cid;
                  if (cont.length > 10) {
                    cont = cont.substring(0, 15) + ".....";
                  }
                  contents += `<div style="width: 260px; padding: 20px;" onclick="todis(this)">     
    <img src="../image/${avatar}" style="height: 40px;width: 40px;">
    <input type="hidden" style="width: 1px;height:1px" value="${discuss_id}"><span style="margin-left: 20px;" onclick="todetail(this)">${cont}</span>
    <input type="hidden" style="width: 1px;height:1px" value="${cId}">
  </div>`;
                }

                let layers = layer.open({
                  type: 1,
                  title: false,
                  closeBtn: 0,
                  offset: ['80px', '1220px'],
                  scrollbar: true,
                  shadeClose: true,
                  skin: 'yourclass',
                  content: contents
                });
                console.log(layers.content)


              }
            }
          })

        }


      }
      //TODO消息弹出层








      let token = localStorage.getItem("token");
      if (token != null && token.trim().length > 0) {
        $.ajax({
          type: "get",
          headers: { token: token },
          url: "http://localhost:70/devu/user/userinfo",
          success: function (res) {
            console.log(res);
            if (res.code == "200") {
              let content = res.content;
              $("#nickname").html(content.nickname);
              $("#avatar").attr("src", "http://localhost:70/cattle-and-horses-oj-html/image/" + content.avatar);
              comment = content.commentOneVo;
              $(".layui-badge").text(content.counts);
              //合法请求，链接websocket
              if (content.isvip == "1") {
                $("#vipbnt").text("超级plus会员");
              }
              connect(res);
              //TODO...请求后端链接....


            }
          }
        })

      } else {
        $(".layui-badge").css("display", "none");
      }
    })







    todis = function () {

    }


    exit = function () {

      localStorage.clear();
      window.location = "login.html";
    }

    function mianshi() {
      token = localStorage.getItem("token");
      if (token == null) {
        alert("请您先登录")
      } else {
        window.location = "photo.html";
      }

    }
  </script>
</body>

</html>